00:01
MALE: In this video,
I'll show you how
00:04
to use the debugger in
00:06
Visual Studio Code
to be able to step
00:09
through your program
one line at a time.
00:12
The debugger is simply
a tool that allows
00:15
us to watch the
computer do its work.
00:18
We can watch as the
computer executes
00:20
each line of our program
one line at a time.
00:23
And we can watch
the values in
00:25
the variables to see
if they're correct.
00:28
This is a great tool
for helping us find
00:30
mistakes that
we might have
00:32
made in our program.
00:34
I have here a
simple program.
00:37
At the bottom, you see it
00:38
has our normal call to main.
00:40
At the top is our
main program and
00:42
it even tells us what
this program does.
00:44
It simply computes
fuel efficiency
00:47
in miles per gallon.
00:48
Pretty simple program.
00:49
It gets some user input,
00:51
calls this second
function down here,
00:53
the miles per
gallon function,
00:55
it calls it right
there at line nine,
00:56
and then stores
the result in
00:58
a variable named
efficiency
00:59
and prints the result.
01:01
Let's first run
the program all by
01:04
itself and see if it's
01:05
working, and if
it's not working,
01:07
if there's a
mistake, we'll put
01:09
it--we'll start
the debugger and
01:10
show you how to
step through it
01:12
one line at a time
in the debugger.
01:14
I have here some numbers
01:16
that I made these up,
01:18
but some numbers that are
01:19
plausible, possible
numbers for travel
01:23
in the United States.
01:24
So let's put those
in a calculator first.
01:27
To compute
miles per gallon,
01:29
we simply get the distance
01:30
traveled divided by
the number of gallons.
01:33
So you to get the
distance, I'll subtract.
01:35
I'll take 2,010
subtract 1,030.
01:39
2,010, subtract
1,030.
01:44
That's the distance
traveled, 980 miles
01:47
and I'll divide that
by 30 gallons.
01:50
And that tells me that
01:51
the amount, we'll
just call it 32.7,
01:55
well, we can say
32.67.
01:57
So that is the
number of miles per
02:00
gallon that my car got on
02:04
a trip halfway across
the United States.
02:08
Okay, great.
Let's try putting
02:10
those same numbers
in our program,
02:12
we'll run the program
and see if it works.
02:14
Here I have the program, I
02:16
click the Run button.
02:18
It asks me for the
previous or
02:20
beginning odometer, which
was 1,030.
02:23
Then I'll type in the next
02:24
one, which was 2,010.
02:27
And then it asks me for
the amount of fuel,
02:30
which is 30 miles--30 gallons.
02:32
I type that in and I get
02:34
this result here, 0.49.
02:37
That's nowhere near
what I was expecting.
02:40
I was expecting 32.67.
02:42
So there must be a
problem in this program.
02:45
I'm going to use, the
debugger then to step
02:47
through it one
line at a time
02:49
to find the mistake.
02:50
Before we start
using a debugger,
02:53
we need to set
a breakpoint.
02:55
A breakpoint is a point
02:57
at which the computer will
02:58
stop and wait for us
to tell it what to do.
03:01
We can set a breakpoint
really anywhere in
03:03
our program that has
03:05
an executable
line of code,
03:06
you can't set a breakpoint
at a blank line.
03:09
There is no executable
code on line 4,
03:11
so I can't set a
breakpoint here.
03:13
I can set a breakpoint
03:15
almost at any other line.
03:16
I think that I will set it
03:18
right at the beginning
of this program.
03:22
the very first line of
03:23
this program that will
really be executed.
03:25
So I'll move my
mouse here just
03:27
to the left of
the 33 and click.
03:29
And you see that red dot,
03:30
that is a break-point.
03:32
Now I can set other
breakpoints too.
03:34
I'm not limited
to just one.
03:36
But today I want to start
just with that one.
03:40
Great. Now I'll start
the debugger.
03:42
First, I click this icon
over here that looks
03:45
like a run triangle.
03:47
Run icon with the
little beetle,
03:50
or a bug next to it.
03:51
That will open
that debug frame.
03:53
And then I click
run and debug,
03:55
and then I choose the
03:57
currently active
Python file.
04:01
That means the
computer starts
04:03
executing my program,
04:05
I have some
interesting things
04:07
over here on the left.
04:09
I think the breakpoints,
04:10
I'm going to close these.
04:11
I don't really
need to see them.
04:13
It shows me that,
"hey, you have
04:14
a break point in your
"example.py" program."
04:18
And I knew that. It tells
04:19
me it's at line
33, there it is.
04:21
I'm just going to
collapse that frame.
04:23
I think for now,
I'll collapse
04:25
the call stack frame
04:27
and the watch
frame as well.
04:28
That will let me
focus a little
04:30
more on the
local variables.
04:32
That's really where
I'm interested.
04:33
Okay, here in this frame,
04:36
I can see my program,
04:39
and I can see this
line is highlighted.
04:41
That means the computer
is stopped right there.
04:44
It hasn't yet executed
that line of code.
04:46
It's waiting for me to
tell it what to do.
04:49
One interesting feature
of this debugger
04:52
is if I hold the mouse
04:53
over the name
of a variable,
04:55
it will actually show
04:56
me what's inside
the variable.
04:58
So it's showing me that
this variable with
05:00
the double underscore
name, that's its name.
05:02
It's a silly name
for a variable,
05:05
it happens to
have inside of it
05:07
double underscore, main,
double underscore.
05:09
That's what it has. Okay,
05:10
these icons up here
are what allow me to
05:13
control the computer as
05:15
it steps through
the program.
05:17
This one would just start
05:18
the program--would just
continue it executing.
05:20
I don't want to do
that very often.
05:22
This one, step over, is
pretty interesting,
05:25
and so is step into.
05:28
the difference in
just a minute.
05:30
But I'm going to use step
05:32
into for a little while.
05:33
So I click this button
and when I click it,
05:36
the computer will
execute line 33.
05:39
Great. The comparison
at line 33 was true,
05:43
so because it was true,
05:44
the computer will
now execute what's
05:46
inside the if statement,
which is at line 34.
05:49
Again, I'm going to click
the step into icon.
05:52
And now I'm
inside of main.
05:55
And let's see, I
think, I'm not sure.
05:59
I don't want to click step
06:00
into here because I don't
06:01
want to step into
the print function.
06:03
I guess I'll have to
06:04
explain to you
the difference
06:05
between step over
and step into.
06:08
Step into would step
06:10
into a function and let
me watch it execute.
06:14
But I don't want to watch
06:15
the print
function execute.
06:17
I know it works because
06:18
it's just part of Python.
06:20
So I don't want to
watch inside of it.
06:22
So, I'll use the step
over icon.
06:25
When I want to
watch the inside of
06:27
a function, which
I will want to
06:29
watch here on line 9,
06:30
then I'll use
the step into
06:32
to step into the
function. Here we go,
06:34
so I'll use step over,
06:36
I'll see the
print, it happened
06:37
down there on
the terminal.
06:39
Step over again,
another print, okay.
06:41
I'll click step over
and the computer will
06:43
ask me for those
numbers. Let's see,
06:45
the first one, oh I have to
click down there, careful.
06:48
The first number was
1,030, so I type that in.
06:53
The computers is now
waiting at line six.
06:56
again and the computer
is now executing line six,
07:00
and the number was 2,010.
07:04
And the computer is now
waiting for me at line seven.
07:07
So I'll step over again.
07:09
And I was supposed
to type in 30 miles.
07:13
Now the computer is
ready at line nine.
07:15
It's ready to execute
07:16
the code here
at line nine.
07:18
And I want to be careful,
07:19
I want to step into
because I want to
07:21
see the miles per
gallon function work.
07:24
But before I do that,
07:27
these local
variables first.
07:29
Let's see if
they're accurate.
07:33
I was expecting
the previous
07:34
odometer to be 1,030
07:36
and the current odometer
variable to be 2,010.
07:40
And the fuel
amount, excuse me,
07:42
to be 30 mile--30 gallons.
07:44
So those all look correct.
07:47
So I think the program
is working thus far.
07:50
I'm going to click
the step into,
07:52
and once the computer gets
07:53
inside of miles
per gallon,
07:55
I'll examine the variables
again. Here we go.
07:58
I'm now inside the miles
08:01
per gallon or the
computer, better
08:02
said, the computer is inside
08:03
the miles per
gallon function.
08:05
And it's ready to
execute line 24.
08:08
But I want to examine
these variables.
08:11
Hey, wait, that
doesn't look right.
08:14
that the amount
of gallons is
08:16
2,010, end miles... none
of those are right.
08:23
they're in the
wrong order.
08:24
Maybe they came in
the wrong order.
08:27
I may not even
have to step
08:29
any farther through
this program.
08:31
I think that I've seen
08:32
what the mistake
is right now.
08:34
These variables have
the wrong values.
08:36
The amount in gallons
was supposed to be 30.
08:39
The start miles
was supposed
08:42
and end miles was
supposed to be 2,010.
08:45
What did I do wrong?
08:47
Let's see. Let's examine
08:48
these two lines of code.
08:49
As I look at this line of
08:51
code, the function call,
08:53
compared to the miles
08:55
per gallon, the
function header,
08:57
it looks like I have
08:59
these in the wrong
order, don't I?
09:01
I should have put
previous odometer
09:03
first so it would match
09:05
and current
odometer second
09:07
so it would match
with end miles.
09:09
And then finally fuel
amount last so that
09:12
its value would
match up and be
09:13
passed into
amount gallons.
09:15
So I don't even have
to go any further.
09:17
I'm going to stop
this executing.
09:19
I'll click the
stop button here.
09:20
I'll close this
temporarily.
09:23
I'm going to fix
this. Let's see,
09:25
so we said previous
and current odometer
09:28
goes first. Whoops, I missed.
09:31
They go first. Okay,
that looks better.
09:35
So the value that's in
09:37
the previous
odometer variable
09:38
will go into the
start miles,
09:41
the current odometer
will go into
09:42
the end miles, and
the value that's
09:44
in fuel amount will go
09:45
into amount gallons.
09:46
Let's try that again.
09:48
Let's see, I'll
save this file
09:50
just to make sure I
debug the right thing.
09:51
So I save my changes.
09:53
I'll click run
and debug again.
09:57
the currently
active Python file.
09:59
Okay, great, the
computer starts.
10:02
It's now stopped
waiting right here
10:04
at this line of
code, waiting
10:05
for me to tell
it what to do.
10:07
So I'll use step over
on the if statement,
10:10
step into because I
want to see main work.
10:12
So I'll step into
the main function,
10:15
step over the print
functions a little
10:17
faster here,
get the value.
10:19
Let's see, the previous
odometer was 1,030.
10:22
Let's do the next one.
10:24
The current odometer
reading is 2,010.
10:30
the amount in
gallons is 30.
10:35
Now I want to watch
the miles per
10:37
gallon function do
its work again.
10:39
So again, I'll
use step into.
10:41
So instead of step over,
I click step into.
10:44
Here I am, the computer
10:46
is inside the miles
per gallon function.
10:48
I'll examine
these variables
10:49
again. That looks better.
10:50
The amount in
gallons is 30,
10:52
the end miles is 2,010.
That's good. 2,010 miles.
10:57
And the start miles
is 1,030 miles.
11:01
So I'm going to continue
11:02
stepping with the step
11:03
over and watch
the computer
11:05
execute the code in here.
11:06
So it tells me
the distance,
11:08
980 miles, that's correct.
11:10
That's what I got on
my calculator earlier.
11:12
Let's see if it's
still there.
11:13
There it is, 980 miles.
11:15
So that's what I
was expecting.
11:17
The miles per gallon will
11:18
simply be the distance
11:19
divided by the
amount in gallons.
11:22
Oh, that looks
much better.
11:24
The MPG, or miles per
gallon variable is 32.67.
11:27
Now it will
be returned
11:28
when I click step over,
so it gets returned here.
11:32
We didn't get to watch.
11:33
It's unfortunate the
debugger doesn't
11:34
let us watch the
last part of line 9.
11:37
But what happened
when the computer
11:40
executed the return
statement at line 26,
11:43
the computer
took the value
11:45
that was in the
mpg variable,
11:47
returned it here, it
returned it right here.
11:50
Or you can, some
people think
11:51
of it as substituting in
11:52
place of that
function name,
11:55
so it returns it
right there.
11:56
And then because of
this equal sign,
11:58
that amount got assigned
12:00
to--or stored in the
efficiency variable.
12:02
And now the computer
is ready to print it,
12:04
notice the efficiency
variable has
12:05
the same value that the
12:07
mpg variable had
inside of it.
12:09
We do the print, and
12:11
that's actually the
end of the program.
12:13
It's all done, and it
12:14
printed out the
right value.
12:17
Okay, I'm going to pause
12:19
the recording
for a minute and
12:20
purposefully introduce
another mistake
12:23
in this program,
a different one.
12:24
And then I'll
step through it.
12:27
I'll step through
it in the debugger
12:30
can find, spot where
12:32
the mistake
actually happens.
12:42
As I said, I introduced
12:45
a mistake in this
program on purpose.
12:48
I'm going to use
the debugger to
12:49
step through the
program again,
12:51
but this time I won't
talk as much.
12:53
I might point out
a few things.
12:55
Say, "Look at this,
look at that,"
12:56
but I'll see if,
we'll see if you can
12:58
spot where the mistake
happens in the program.
13:01
So here we go.
I still have
13:02
my break point down
here at line 33.
13:05
That's really the
very first line
13:07
of code that executes
in this program.
13:09
I could move
that breakpoint,
13:10
as I said, but
I'll leave it
13:11
there just for
consistency's sake
13:14
Click run and debug.
13:17
the currently
active Python file.
13:20
The computer starts
executing my program.
13:22
Again, it's waiting here
13:23
for me to tell
it what to do.
13:25
So I'll step over and then
13:27
step into because I
want to watch main.
13:29
Now I'm going to be
a little quieter.
13:36
It will ask me
for some numbers.
13:52
Okay, what do you
think? So far,
13:55
is it okay? Do
the values and
13:57
the variables
look correct?
13:59
So these variables,
the local
14:01
variables, are
shown over here.
14:02
That's what you
would want to
14:03
sure that they are
what we expected.
14:06
I'm now going to
step into the miles
14:08
per gallon function and
watch it do its work.
14:11
So I step into,
here we are inside
14:14
the miles per
gallon function.
14:16
Again, it's a good
idea to examine
14:17
the variables and see
if they look correct.
14:20
So here we have
those values.
14:22
The amount in
gallons is 30, the end
14:23
mile is 2,010, and the
start mile is 1,030,
14:26
let's step over. Again,
14:27
I'll go kind of
slowly, but you
14:29
watch the variables,
see if they look right.
14:31
There's the
distance variable,
14:37
there's the miles per
gallon variable.
14:41
Now we return the value.
14:44
That value gets stored in
14:46
the efficiency variable
which is right here.
14:48
Clearly it's not
the right result
14:50
and then it gets printed.
14:52
So did you see where
the error happened?
14:55
Which line had the first,
which was the first line
14:59
that had the wrong value?
As we step through it,
15:01
the first line
of code that had
15:03
the wrong value
was this one.
15:05
All of the others
are right.
15:06
Line 24 correctly
calculated the distance,
15:09
but this was the first one
15:10
that had the wrong value.
15:12
So that's a huge hint to us.
15:14
We suddenly say,
wait a minute,
15:15
the mpg isn't
the right value,
15:17
what's wrong with
that line of code?
15:19
And hopefully you
spotted that I
15:21
simply introduced
the mistake,
15:23
it should have been the
distance divided by
15:26
the amount of
gallons rather than
15:27
the amount of gallons
divided by distance.
15:30
That concludes this
video that shows you how
15:33
to use the debugger
inside of VS Code.
15:36
As a very brief review,
15:38
how do you use
the debugger?
15:41
a break point in
your program.
15:43
I recommend that
you don't set
15:45
your break points on
the function headers.
15:48
That means the computer
will simply stop at
15:50
the function header when
15:51
it's reading your file.
15:53
So you want to
set breakpoints
15:55
probably inside
of the functions.
15:57
A good place
is either down
15:59
here at the very
beginning of the program
16:01
or you could set
a breakpoint at
16:03
that first line
of code inside,
16:05
notice I'm inside, line
two is inside of me.
16:08
So to use the
debugger, you
16:09
first set a breakpoint,
move your mouse to
16:11
the left of the
line number
16:12
where you want
the break point, and
16:13
click until you
get a red dot.
16:16
Then you open the
debugger using this icon
16:19
here that looks like a run
16:21
and the beetle or a bug.
16:23
Then we click run
and debug again.
16:27
the currently
active Python file.
16:29
Your computer starts
executing our program.
16:31
Then we use these icons
16:33
here to step over
or step into.
16:36
And we examine the values
of the local variables.